Ext.BLANK_IMAGE_URL='../ext/resources/images/default/s.gif';
Ext.onReady(function(){
	Ext.QuickTips.init();
	
	//Create a variable to hold our EXT Form Panel.
	//Assign various config options as seen
	var login=new Ext.FormPanel({
		labelWidth: 80,
		url:'login.jsp',
		frame:true,
		title:'Please Login',
		defaultType:'textfield',
		monitorValid:true,
		//specifie attributes for the text fields for username / password
		//The "name" attribute defines the name of variables sent to the server
		items:[{
				fieldLabel:'Username',
				name:'loginUsername',
				allowBlank:false				
			},{
				fieldLabel:'Password',
				name:'loginPassword',
				inputType:'password',
				allowBlank:false
			}
			],
		//All the magic happens after the user clicks the button
		buttons:[{
				text:'Login',
				//Function that fires when user clicks the button
				handler:function(){
					login.getForm().submit({
						method:'POST',
						waitTitle:'Connecting',
						waitMsg:'Sending data...',
						// Functions that fire (success or failure) when the server responds. 
						// The one that executes is determined by the 
						// response that comes from login.asp as seen below. The server would 
						// actually respond with valid JSON, 
						// something like: response.write "{ success: true}" or 
						// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
						// depending on the logic contained within your server script.
						// If a success occurs, the user is notified with an alert messagebox, 
						// and when they click "OK", they are redirected to whatever page
						// you define as redirect. 
						success:function(){
							Ext.Msg.alert('Status','Login Succesful!',function(btn,text){
								if(btn=='ok'){
									var redirect='http://www.baidu.com';
									window.location = redirect;
								}
							});
						},
						// Failure function, see comment above re: success and failure. 
						// You can see here, if login fails, it throws a messagebox
						// at the user telling him / her as much.
						failure:function(form,action){
							if(action.failureType=='server'){
								var obj=Ext.util.JSON.decode(action.response.responseText);
								Ext.Msg.alert('Login Failed','Authentication Server is unreachable :'+obj.errors.reason);
							}
							login.getForm().reset();
						} 						
					});
				}
			}		
		]
	});
	
	var win = new Ext.Window({
		layout:'fit',
		width:300,
		height:150,
		closable: false,
		resizable:true,
		plain:true,
		border:true,
		items:[login]
	});
	win.show();
});
